.bubble{
  animation: pop 1s linear;
}
.bubble-negative{
  animation: pop-negative 1s linear;
}

@keyframes pop {
  0%{
    transform:translate(0,0) scale(0.5);
  }
  16.667%{
    transform:translate(-10px,-30px) scale(0.7);
  }
  26.667%{
    transform:translate(10,-100px,) scale(1.2);
  }
  76.667%{
    transform:translate(-50px,-130px) scale(1.4);
  }
  100%{
    transform:translate(-30px,-200px) scale(1.5);
  }
}
@keyframes pop-negative {
  0%{
    transform:translate(0,0) scale(0.5);
  }
  30.667%{
    transform:translate(10px,-70px) scale(1.2);
  }
  46.667%{
    transform:translate(-20px,-110px,) scale(1.3);
  }
  80.667%{
    transform:translate(40px,-160px) scale(1.4);
  }
  100%{
    transform:translate(-30px,-200px) scale(1.5);
  }
}